/* 左侧导航栏 */
.aside {
    width: 200px;
}
.aside-list {
    /* 固定定位 */
    position: fixed;
    left: 0;
    width: 200px;
}
.aside .el-menu {
    height:100vh;

}
/* 字体图标的样式 */
.aside i {
    font-size: 24px;
    font-weight: 500;
    margin-right: 5px;
}
.aside .el-radio-button__inner {
    border:none;
    font-size: 20px;
}


/* 页面头部 */
/* 宽度响应 */
.el-header {
    min-width: 1280px;
}
.headerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 水平垂直对齐 */
    height: 70px;
    width:1300px;
    /* 固定定位 */
    position:fixed;
    top:0;
    background-color: #fff;
    z-index: 999;
    padding: 10px 0;
}
.headerNav img {
    width: 100%;
    height: 50px;
}
.header-search {
    flex: 1;
    margin: 0 2rem;
}
/* 按钮的颜色  */
.headerNav .el-input-group__append {
    background-color: var(--el-color-primary);
    color: #fff;
}
.header-right .el-link {
    margin: 0 20px;
}
/* 伪类选择器：可以用来选取获得焦点的元素
当鼠标移入上去后取消黑色边框 */
.el-dropdown-link:focus{
    outline: none;
}
/* 右侧下面展示 */
.el-main {
    min-width: 1280px;
    overflow: hidden;
}
/* 区域展示部分 */
.searchlist {
    width: 1300px;
    display: grid;
    grid-template-columns: repeat(5,auto);
    margin-top: 15px;
}
.searchlist-item {
    border: 1px solid #dadada;
    margin-left: -1px;
}
/* 目的地/酒店名称 */
.search-box {
    padding: 8px 12px;
}
.search-box label {
    color: #999;
    display: block;
}
.search-box input {
    border:none;
    font-size: 16px;
    font-weight: 700;
    padding-top: 15px;
}

.input{
    outline: none;
}
/* 伪类选择器，当元素获得焦点的时候，能够控制父元素的样式 */
.searchlist-item:focus-within {
    border-bottom: 2px solid var(--el-color-primary);
}
/* 入住时间/退房时间 取消边框的颜色 */
.search-box .el-date-editor.el-input__wrapper {
    box-shadow:none;
}
.search-box .el-date-editor.el-input__wrapper:hover {
    box-shadow:none;
}
/* 搜索按钮的样式 */
.searchlist-item .el-button {
    width: 100%;
    height:100%;
    border-radius: 0;
}
.searchlist-item .el-button .el-icon {
    font-size: 30px;
}

/*!* topfilter开始  *!*/
/*.topfilter {*/
/*    width: 1300px;*/
/*    display:grid;*/
/*    grid-template-columns: 130px 1fr;*/
/*    !* 列 *!*/
/*    grid-template-rows:repeat(3,auto);*/
/*    !* 3行 *!*/
/*}*/
/*.topfilter>div {*/
/*    border-bottom:1px solid #ddd;*/
/*    padding: 0.2rem 1rem;*/
/*}*/
/*.topfilter h4 {*/
/*    line-height: 17px;*/
/*    text-align: center;*/
/*}*/
/*.topfilter .el-button:hover {*/
/*    background-color: var(--el-color-primary);*/
/*    border: 1px solid var(--el-color-primary);*/
/*}*/

/*.topfilter-price{*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*.topfilter-filter{*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*!* 按钮的间距： *!*/
/*.topfilter .el-button {*/
/*    margin: 7px;*/
/*}*/
/*!* 高级筛选 *!*/
/*.topfilter-filter .el-dropdown {*/
/*    margin: 10px 15px;*/
/*    !* 下拉菜单间距 *!*/
/*}*/

/* 推荐酒店 */
.recommend {
    width:1300px;
    display:flex;
    gap: 0 20px;
    padding: 10px 0;
}
.recommend-left {
    width: 880px;
}
.recommend-right {
    width: 420px;
}
.banner {
    width: 420px;
    height: 650px;
    margin-top: 57px;
}

h2{
    font-size: 1.2em;
    margin-left: 30px;
}

/* 轮播图 */
.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recommend-list ul li {
    display: flex;
    background-color: #F4F6F9;
    padding: 10px;
    margin-bottom: 10px;
    height: 127px;
}
.list-left {
    /* 设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间 */
    flex: 2;
    display: flex;
}
.list-right {
    flex: 1;
    border-left: 1px solid #ddd;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* 图片的大小 */
.list-left-img {
    flex: 0.7;
}
.list-left-img img {
    width: 100%;
}
.list-left-title {
    flex: 3;
    margin-left: 30px;
}
/* 标题 */
.list-left-tagandtitle {
    font-size: 16px;
    line-height: 3px;
    display: flex;
    margin-bottom: 8px;
    align-items: center;
}
.list-left-tagandtitle img {
    height: 20px;
    width: auto;
    margin: 0 10px;
}
/*.badge-thumb {*/
/*    background:url(@/assets/images/help.png) no-repeat;*/
/*    width: 16px;*/
/*    height: 16px;*/
/*}*/
.list-left-transport {
    margin-bottom: 8px;
}
.list-left-tag .el-tag {
    margin: 3px;
}
.list-right-comment {
    display:flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    height: 40px;
}
.list-right-describe{
    height: 60px;
}
.p1 {
    color: var(--el-color-primary);
    font-size:16px;
    font-weight: 700;
    align-items: center;
    margin-top: 0px;

}
.list-right-describe a {
    color: #999;
    font-size: 11px;
    margin-top: 0px;
}
.list-right-score {
    background-color: var(--el-color-primary);
    color: #fff;
    border-radius: 4px;
    padding: 3px;
    font-size: 18px;
    font-weight: 800;
    margin-left: 9px;
    display: flex;
    align-items: center;
}
.list-right-price p {
    color: var(--el-color-primary);
    font-size:20px;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 9px;
}

